<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body { height: 100%; padding: 0; margin: 0; }
        .outer { height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
        .A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
        .B { height: 100%; background: #D9C666; }
    </style>
</head>
<body>
    <div class="outer">
    <div class="A"> 头部DIV </div>
    <div class="B">下部DIV </div>
</div>
</body>
</html>